/* 顶部状态区深度优化 */
// 修改顶部栏样式，添加顶部留白
.top-bar {
  padding: 20rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 120rpx;
  box-sizing: border-box;
  margin-top: 40rpx; /* 添加顶部留白，可根据需求调整数值 */
}

// 可选：调整卡片样式的顶部间距以保持整体协调
.top-bar, .title-type-section, .details-section, .related-materials,
.training-schedule-section, .match-schedule-section, .reply-section {
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin: 20rpx; /* 保持原有 margin */
  border: none;
}

/* 添加简化顶部栏样式 */
.top-bar-simplified {
  padding: 30rpx 20rpx; /* 增加顶部padding实现留白 */
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100rpx; /* 设置固定高度 */
  margin-bottom: 20rpx; /* 与下方内容保持距离 */
  position: relative;
  z-index: 100; /* 确保在其他元素上方 */
}

/* 确保返回按钮样式正确 */
/* 调整返回按钮位置 */
.back-btn {
  font-size: 40rpx;
  color: #333;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f5f5f5;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 101;
  margin-top: 20rpx; /* 增加margin-top使按钮向下移动，可根据需求调整数值 */
}

/* 可选：调整顶部栏高度以适应按钮位置变化 */
.top-bar-simplified {
  padding: 10rpx 20rpx; /* 减少顶部padding，增加底部padding */
  padding-bottom: 30rpx;
  background-color: #fff;
  display: flex;
  align-items: flex-start; /* 改为flex-start以便按钮能正确响应margin-top */
  box-sizing: border-box;
  height: 120rpx; /* 适当增加高度 */
  margin-bottom: 20rpx;
  position: relative;
  z-index: 100;
}

/* 移除或注释掉未使用的.top-bar样式 */
/*
.top-bar {
  padding: 20rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  min-height: 120rpx;
  box-sizing: border-box;
  margin-top: 40rpx;
}
*/

/* 调整标题区域样式 */
.title-type-section {
  padding: 30rpx 20rpx 20rpx;
  background-color: #fff;
  position: relative;
  z-index: 10;
  margin-top: 0; /* 重置顶部 margin */
}

.back-btn:active {
  background-color: #e0e0e0;
  transform: scale(0.95);
}
.team-info {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  min-width: 0; /* 关键：允许flex容器缩小 */
}

/* 队徽修饰增强 */
.team-logo {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
  border: 4rpx solid #f0f0f0;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.team-logo::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* 未读标签优化 */
.unread-tag {
  background-color: #f43530;
  color: #fff;
  font-size: 22rpx;
  padding: 3rpx 10rpx;
  margin-left: 12rpx;
  flex-shrink: 0;
  border-radius: 0 16rpx 16rpx 0;
  box-shadow: 0 3rpx 8rpx rgba(244, 53, 48, 0.35);
  position: relative;
  overflow: hidden;
}

.unread-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation: slide 2s infinite;
}

@keyframes slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 类型标签优化 */
.type-tag {
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translateY(-50%);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #fff;
  box-shadow: 0 3rpx 8rpx rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100rpx;
}

.training-tag {
  background-color: #ff7d00;
  background: linear-gradient(135deg, #ff7d00, #ffb74d);
}

.match-tag {
  background-color: #1aad19;
  background: linear-gradient(135deg, #1aad19, #4ade80);
}

/* 训练和比赛安排区分增强 */
/* 训练安排区域样式优化 */
.training-schedule-section {
  position: relative;
  background-color: rgba(255, 125, 0, 0.05);
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx 30rpx 50rpx; /* 增加左侧padding给边框留出空间 */
  box-shadow: 0 4rpx 16rpx rgba(255, 125, 0, 0.1);
  border-radius: 12rpx;
  overflow: hidden; /* 确保内容不会溢出边框 */
}

/* 训练安排左侧竖形边框 */
.training-schedule-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%; /* 与功能板块一样高 */
  width: 16rpx;
  background-color: #ff7d00; /* 橙色 */
  z-index: 1;
}

/* 比赛安排区域样式优化 */
.match-schedule-section {
  position: relative;
  background-color: rgba(26, 173, 25, 0.05);
  margin-bottom: 20rpx;
  padding: 30rpx 30rpx 30rpx 50rpx; /* 增加左侧padding给边框留出空间 */
  box-shadow: 0 4rpx 16rpx rgba(26, 173, 25, 0.1);
  border-radius: 12rpx;
  overflow: hidden; /* 确保内容不会溢出边框 */
}

/* 比赛安排左侧竖形边框 */
.match-schedule-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%; /* 与功能板块一样高 */
  width: 16rpx;
  background-color: #1aad19; /* 绿色 */
  z-index: 1;
}

/* 移除冗余的边框定义 */
.training-schedule-section, .match-schedule-section {
  border: none; /* 移除之前的边框定义 */
}

/* 优化区域内的项目样式 */
.schedule-item,
.match-item {
  padding: 20rpx 0;
  border-bottom: 1rpx dashed #f0f0f0;
}

.schedule-item:last-child,
.match-item:last-child {
  border-bottom: none;
}

.match-schedule-section::before {
  content: '';
  position: absolute;
  left: -16rpx;
  top: 0;
  bottom: 0;
  width: 24rpx; /* 从32rpx调整为24rpx，使竖线变细 */
  background-color: #1aad19;
  box-shadow: 0 0 0 12rpx rgba(26, 173, 25, 0.15),
              0 0 20rpx 8rpx rgba(26, 173, 25, 0.2);
  z-index: 1;
  border-radius: 6rpx 6rpx 0 0;
}

.match-schedule-section::before {
  content: '';
  position: absolute;
  left: -16rpx;
  top: 0;
  bottom: 0;
  width: 24rpx; /* 从32rpx调整为24rpx，使竖线变细 */
  background-color: #1aad19;
  box-shadow: 0 0 0 12rpx rgba(26, 173, 25, 0.15),
              0 0 20rpx 8rpx rgba(26, 173, 25, 0.2);
  z-index: 1;
  border-radius: 6rpx 6rpx 0 0;
}

/* 区域标题优化 */
.section-title.training-title {
  color: #ff7d00;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 32rpx; /* 增大标题字体 */
  padding-bottom: 15rpx;
  margin-bottom: 25rpx;
  border-bottom: 2rpx solid rgba(255, 125, 0, 0.2);
}

.section-title.match-title {
  color: #1aad19;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 32rpx; /* 增大标题字体 */
  padding-bottom: 15rpx;
  margin-bottom: 25rpx;
  border-bottom: 2rpx solid rgba(26, 173, 25, 0.2);
}

.section-title.training-title::before,
.section-title.match-title::before {
  content: '';
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  margin-right: 15rpx;
}

.section-title.training-title::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff7d00"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>') no-repeat center center;
  background-size: contain;
}

.section-title.match-title::before {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231aad19"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.65 9.12 8.43 9.87v-6.98h-2.54V12h2.54V9.79c0-2.50 1.49-3.89 3.77-3.89 1.09 0 2.23.19 2.23.19v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.98C18.35 21.12 22 16.99 22 12z"/></svg>') no-repeat center center;
  background-size: contain;
}

/* 分割线优化 */
.details-section::after,
.related-materials::after,
.training-schedule-section::after,
.match-schedule-section::after {
  content: '';
  display: block;
  width: calc(100% - 60rpx);
  height: 1rpx;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  margin: 20rpx auto 0;
}

/* 按钮交互效果增强 */
.navigate-btn, .send-btn, .preview-btn {
  border-radius: 40rpx;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.navigate-btn::after, .send-btn::after, .preview-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: -1;
}

.navigate-btn:active::after, .send-btn:active::after, .preview-btn:active::after {
  width: 200%;
  height: 200%;
}

/* 输入框聚焦效果优化 */
.reply-input {
  border: 2rpx solid #f0f0f0;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.reply-input:focus {
  border-color: #1989fa;
  box-shadow: 0 0 0 6rpx rgba(25, 137, 250, 0.1);
  outline: none;
}

/* 卡片悬浮效果增强 */
.top-bar, .title-type-section, .details-section, .related-materials,
.training-schedule-section, .match-schedule-section, .reply-section {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s;
}

.top-bar:hover, .title-type-section:hover, .details-section:hover, .related-materials:hover,
.training-schedule-section:hover, .match-schedule-section:hover, .reply-section:hover {
  transform: translateY(-6rpx);
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.12);
  background-color: #fcfcfc;
}

.team-name-time {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  overflow: hidden;
  min-width: 0; /* 允许文本容器缩小 */
}

.team-name {
  font-size: 28rpx; /* 减小字体大小增加适配性 */
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.publish-time {
  font-size: 22rpx; /* 减小时间字体 */
  color: #999;
  margin-top: 6rpx;
  white-space: nowrap;
}

.unread-tag {
  background-color: #f43530;
  color: #fff;
  font-size: 22rpx;
  padding: 3rpx 10rpx;
  border-radius: 14rpx;
  margin-left: 12rpx;
  flex-shrink: 0;
  border-radius: 0 14rpx 14rpx 0;
  box-shadow: 0 2rpx 6rpx rgba(244, 53, 48, 0.3);
}

.menu-btn {
  font-size: 36rpx;
  color: #666;
  margin-left: 16rpx;
  flex-shrink: 0;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 标题与类型区优化 */
.title-type-section {
  padding: 30rpx 20rpx 20rpx;
  background-color: #fff;
  position: relative;
  z-index: 10;
}

.title {
  font-size: 32rpx; /* 减小标题字体 */
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  max-height: 90rpx; /* 限制两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

.type-tag {
  position: absolute;
  top: 50%;
  right: 20rpx;
  transform: translateY(-50%);
  padding: 5rpx 14rpx;
  border-radius: 18rpx;
  font-size: 22rpx;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.training-tag {
  background-color: #ff7d00;
}

.match-tag {
  background-color: #1aad19;
}

/* 标题下划线 */
.title-type-section::after {
  content: '';
  display: block;
  width: 70rpx;
  height: 5rpx;
  background: linear-gradient(to right, #1989fa, #40a9ff);
  border-radius: 3rpx;
  margin-top: 14rpx;
}

/* 详情内容区 */
.details-section {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.plan-item {
  margin-bottom: 20rpx;
}

.original-plan {
  text-decoration: line-through;
  color: #999;
}

.new-plan {
  font-weight: bold;
}

.plan-label {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.plan-content {
  font-size: 28rpx;
  display: block;
  margin-top: 8rpx;
}

.reason-section {
  margin-top: 20rpx;
}

.reason-label {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.reason-content {
  font-size: 28rpx;
  color: #333;
}

.match-info-item {
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  width: 100rpx;
}

.info-content {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.additional-info {
  margin-top: 20rpx;
}

/* 关联资料区 */
.related-materials {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.attachment-list {
  display: flex;
  flex-direction: column;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.file-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.file-size {
  font-size: 24rpx;
  color: #999;
  margin-right: 16rpx;
}

.preview-btn {
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  background-color: #07c160;
  color: #fff;
  border-radius: 4rpx;
}
.location-info {
  display: flex;
  flex-direction: column;
  padding: 16rpx 0;
  align-items: flex-start !important; /* 强制左对齐 */
  justify-content: flex-start;
  width: 100%;
}

.address-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10rpx;
}

.red-dot {
  width: 12rpx;
  height: 12rpx;
  background-color: #e64340; /* 红色 */
  border-radius: 50%;
  margin-right: 8rpx;
}

.address {
  font-size: 28rpx;
  color: #333;
  width: 100%;
}

.navigate-btn {
  font-size: 24rpx;
  padding: 6rpx 20rpx;
  background-color: #1989fa;
  color: #fff;
  border-radius: 4rpx;
  align-self: flex-start !important; /* 强制按钮左对齐 */
  margin: 0 !important;
  float: left;
  clear: both;
}

/* 核心操作区 */
/* 删除核心操作区样式 */
/*
.action-bar {
  position: fixed; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  display: flex; 
  background-color: #fff; 
  border-top: 1rpx solid #eee; 
  height: 100rpx; 
  z-index: 999; 
}

.action-btn {
  flex: 1; 
  height: 100%; 
  line-height: 100rpx; 
  text-align: center; 
  font-size: 28rpx; 
  color: #1989fa; 
  background-color: #fff; 
  border: none; 
  border-right: 1rpx solid #eee; 
}

.action-btn:last-child {
  border-right: none; 
}
*/

/* 删除按钮优化样式 */
/*
.action-btn {
  position: relative; 
  overflow: hidden; 
  transition: all 0.3s; 
}

.action-btn::after {
  content: ''; 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  background: rgba(25, 137, 250, 0.1); 
  transform: scaleX(0); 
  transform-origin: right; 
  transition: transform 0.3s; 
}

.action-btn:active::after {
  transform: scaleX(1); 
  transform-origin: left; 
}
*/

/* 调整比赛安排区域的底部内边距 */
.match-schedule-section {
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  border-left: 8rpx solid #1aad19;
  position: relative;
  padding-bottom: 30rpx; /* 还原底部内边距，不再需要避开操作栏 */
}

.match-list {
  display: flex;
  flex-direction: column;
}

.match-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.match-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.match-date {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.match-time {
  font-size: 28rpx;
  color: #666;
}

.match-content {
  margin-bottom: 10rpx;
}

.opponent-label {
  font-size: 26rpx;
  color: #666;
}

.opponent-value {
  font-size: 26rpx;
  color: #333;
}
// 移除了空规则集 .match-venue
// 移除了空规则集 .match-venue ，保留后续样式规则
// 此处多余的闭合花括号，已移除

.venue-label {
  font-size: 26rpx;
  color: #666;
}

.venue-value {
  font-size: 26rpx;
  color: #333;
}

/* 通用卡片样式 */
.card {
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 更新现有区域样式 */
.top-bar, .title-type-section, .details-section, .related-materials,
.training-schedule-section, .match-schedule-section, .reply-section {
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin: 20rpx;
  border: none;
}

/* 调整margin以适应新的卡片布局 */
.details-section, .related-materials, .training-schedule-section, .match-schedule-section {
  margin-bottom: 20rpx;
}

/* 标题下划线 */
.title-type-section::after {
  content: '';
  display: block;
  width: 80rpx;
  height: 6rpx;
  background: linear-gradient(to right, #1989fa, #40a9ff);
  border-radius: 3rpx;
  margin-top: 16rpx;
}

/* 列表项边框优化 */
.schedule-item, .match-item, .reply-item {
  border-bottom: 1rpx dashed #f0f0f0;
}

.schedule-item:last-child, .match-item:last-child, .reply-item:last-child {
  border-bottom: none;
}

/* 按钮优化 */
.action-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.action-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(25, 137, 250, 0.1);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s;
}

.action-btn:active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* 导航和发送按钮优化 */
.navigate-btn, .send-btn, .preview-btn {
  border-radius: 40rpx;
  transition: all 0.3s;
}

.navigate-btn:active, .send-btn:active, .preview-btn:active {
  opacity: 0.8;
  transform: scale(0.95);
}

/* 输入框优化 */
.reply-input {
  border: 2rpx solid #f0f0f0;
  transition: border-color 0.3s;
}

.reply-input:focus {
  border-color: #1989fa;
  outline: none;
}

/* 区域标题颜色优化 */
.section-title.training-title {
  color: #ff7d00;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.section-title.match-title {
  color: #1aad19;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.section-title.training-title::before,
.section-title.match-title::before {
  content: '';
  display: inline-block;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.section-title.training-title::before {
  background-color: #ff7d00;
}

.section-title.match-title::before {
  background-color: #1aad19;
}

/* 顶部蓝色边栏 */
.blue-top-bar {
  width: 100%;
  height: 150rpx; /* 增加高度，从30rpx改为60rpx */
  background-color: #1989fa; /* 保持原蓝色调 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102; /* 确保在其他元素上方 */
}

// 调整顶部栏位置，避免与蓝色边栏重叠
.top-bar-simplified {
  margin-top: 150rpx; /* 改为与蓝色边栏高度一致，避免重叠 */
  padding: 30rpx 20rpx; /* 增加顶部padding实现留白 */
  background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100rpx; /* 设置固定高度 */
  margin-bottom: 20rpx; /* 与下方内容保持距离 */
  position: relative;
  z-index: 100; /* 确保在其他元素上方 */
}

/* 返回按钮样式优化 */
.back-btn {
  font-size: 36rpx;
  color: #fff; /* 保持白色文字 */
  width: 70rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ff7d00; /* 改为橙色背景，与蓝色边栏形成鲜明对比 */
  box-shadow: 0 4rpx 12rpx rgba(255, 125, 0, 0.3); /* 调整阴影颜色 */
  transition: all 0.3s ease;
  position: relative;
  z-index: 101;
  margin-top: 0; /* 重置margin-top，避免位置偏移 */
  border: 4rpx solid #fff; /* 保持白色边框，增强白色效果 */
}

/* 返回按钮悬停效果 */
.back-btn:hover {
  background-color: #ff9800; /* 悬停时颜色变浅 */
  transform: translateY(-4rpx);
  box-shadow: 0 6rpx 16rpx rgba(255, 152, 0, 0.3);
}

/* 返回按钮点击效果 */
.back-btn:active {
  background-color: #e65100; /* 点击时颜色加深 */
  transform: scale(0.95) translateY(-2rpx);
}

/* 添加按钮图标 */
.back-btn::before {
  content: '';
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 隐藏原有的文本箭头 */
.back-btn {
  overflow: hidden;
}

.back-btn::after {
  content: '';
}
